<template>
	<view class="main">
		<scroll-view @click="closeChatEm" :scroll-top="scrollTop" scroll-y="true" class="mainBox" id="mainBox">
			<template v-for="item in wsStore.chatList">
				<view v-if="item.pos=='left'" class="chatLeft">
					<view class="header" :style="{backgroundImage:'url('+item.userInfo.avatar+')'}"></view>
					<view class="msg">
						
						<rich-text :nodes="item.data"></rich-text>
					</view>
				</view>
				<view v-else class="chatRight">
					<view class="msg">
						<rich-text :nodes="item.data"></rich-text>
					</view>
					<view class="header" :style="{backgroundImage:'url('+headerPath+')'}"></view>
				</view>
			</template>

			<view id="scrollEndDom"></view>

		</scroll-view>
		<view class="bottomBox">
			<view class="BoxTop">
				<input class="chatIpt" type="text" v-model="chatMsg" />
				<uni-icons @click="imgUpload" class="iconIMG" type="images" size="30"></uni-icons>
				<uni-icons @click="showEmote" class="iconIMG" type="color" size="30"></uni-icons>
				<uni-icons class="iconIMG" type="paperplane" size="30" @click="sendMsg"></uni-icons>
			</view>
			<view v-show="emoteFlag" class="emote">
				<text class="emoteItem" v-for="item in emoteList" @click="addEmote(item)">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import * as S from "@/utils/storage.js"
	const instance = getCurrentInstance();
	const userInfo = S.getItem("userInfo")
	if (!userInfo) {
		uni.showToast({
			title: "请先登录",
			success: () => {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}
		})
	}
	
	const headerPath = ref("")
	if(!userInfo.headerurl) {
		headerPath.value ='/static/1.gif'
	}else{
		headerPath.value = userInfo.headerurl
	}
	import {
		useWs
	} from '@/hooks/useWs';
	import {
		useWsStore
	} from '@/stores/ws';
	import {
		upload
	} from "@/utils/upload.js"
	const wsStore = useWsStore()
	const wsHooks = useWs()
	wsHooks.connectWs()

	const scrollTop = ref(0)
	const tempNum = ref(9999)
	const emoteFlag = ref(false)
	const emoteList = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '🫠', '😉', '😊', '😇', '🥰', '😍',
		'🤩', '😘', '😗', '☺️', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🫣', '🤫',
		'🤔', '🫡', '🤐', '🤨', '😐️', '😑'
	]
	// 聊天列表
	const chatList = reactive([])
	const chatMsg = ref("")
	const sendMsg = () => {
		wsStore.chatList.push({
			pos: 'right',
			data: chatMsg.value
		})
		wsHooks.sendSocketMessage({
			type: 'msg',
			data: chatMsg.value
		})
		chatMsg.value = ""
		emoteFlag.value = false
		// scrollEnd()

	}
	const closeChatEm = () => {
		emoteFlag.value = false
	}
	// 把表情添加到输入框
	const addEmote = (emote) => {
		chatMsg.value += emote
	}
	// 显示表情
	const showEmote = () => {
		emoteFlag.value = !emoteFlag.value
	}
	// 文件上传 
	const imgUpload = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				wsStore.chatList.push({
					pos: 'right',
					data: `<img src="${tempFilePaths[0]}"  width="220"/>`
				})
				upload(tempFilePaths[0]).then(e => {
					console.log(e.code)
					// code 等于1 说明文件上传成功了 ，直接将图片发送出去
					if (e.code === 1) {
						console.log(e.data.fullurl)
						// 将发送的信息 放到 聊天记录里面

						wsHooks.sendSocketMessage({
							type: 'msg',
							data: `<img src="${e.data.fullurl}"  width="220" />`
						})
					}
				})
			}
		})

	}
	watch(() => wsStore.chatList.length, (newval) => {
		tempNum.value++
		scrollEnd()
	})
	const domPos = ref("scrollEndDom")
	const scrollEnd = () => {
		// domPos.value = domPos.value==='scrollEndDom1'?"scrollEndDom":'scrollEndDom1'
		const query = uni.createSelectorQuery().in(instance.proxy);
		query
			.select("#scrollEndDom")
			.boundingClientRect((data) => {
				console.log(data, 98)
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);
				nextTick(() => {
					scrollTop.value = Math.ceil(data.top) * Math.ceil(Math.random() * 1000)
				})
			})
			.exec();
	}
</script>

<style lang="less" scoped>
	.bottomBox {

		position: fixed;
		bottom: 0rpx;
		width: 100%;
		overflow: hidden;
		background-color: rgb(248, 248, 248);
		padding-bottom: 40rpx;

		.BoxTop {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			margin: 0rpx 20rpx;

			.chatIpt {
				height: 70rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-right: 20rpx;

				flex: 1;

			}

			.iconIMG {

				background-color: #fff;
				border-radius: 50%;
				padding: 4rpx;
				width: 60rpx;
				margin-right: 10rpx;
			}
		}

		.emote {
			padding: 0rpx 20rpx;
			height: 200rpx;
			overflow: scroll;
			padding-bottom: 20rpx;

			.emoteItem {
				padding: 20rpx 10rpx;
				font-size: 50rpx;
			}
		}
	}

	.main {
		background-color: #fff;
		width: 100%;
		height: 100%;
	}

	#scrollEndDom {
		width: 100%;
	}

	.mainBox {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #fff;
		padding-bottom: 200rpx;
	}

	.chatLeft {
		display: flex;
		margin-top: 20rpx;

		.header {
			width: 80rpx;
			height: 80rpx;
			/* border-radius: 50%; */
			// border: 1px solid red;
			margin-left: 20rpx;
		}

		.msg {
			/* line-height: 80rpx; */
			line-height: 40rpx;
			background-color: beige;
			padding: 20rpx 20rpx;
			border-radius: 20rpx;
			margin-left: 10rpx;
			max-width: 450rpx;
		}

	}

	.chatRight {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;

		.header {
			width: 80rpx;
			height: 80rpx;
			/* border-radius: 50%; */
			// border: 1px solid red;
			margin-right: 20rpx;
		}

		.msg {
			/* line-height: 80rpx; */
			line-height: 40rpx;
			background-color: greenyellow;
			padding: 20rpx 20rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
			max-width: 450rpx;
		}
	}
</style>